<template>
  <!-- 面包屑 -->
  <div class="Crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }"> 首页 </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div id="piebox" style="width: 100%; height: 400px"></div>
  <div id="mapbox" style="width: 100%; height: 600px"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import * as http from "@/request/http";
import { EChartsOption, PieSeriesOption } from "echarts";
import { onMounted } from "vue";
import chinajson from "@/json/china2.json";

echarts.registerMap("china", chinajson as any);

onMounted(() => {
  var myChart = echarts.init(document.getElementById("piebox")!);
  var mapChart = echarts.init(document.getElementById("mapbox")!);

  // 饼图图表
  let option: EChartsOption = {
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,0.3)",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      left: "right",
      orient: "vertical",
      height: 100,
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        emphasis: {
          label: {
            show: true,
            fontWeight: "bold",
          },
        },
        label: {
          color: "inherit",
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };

  // 地图图表

  let option2: EChartsOption = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} (p / km2)",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    visualMap: {
      min: 100,
      max: 1000000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["#FDC6C0", "#FF4806", "#FF4806"],
      },
    },
    series: [
      {
        name: "香港18区人口密度",
        type: "map",
        map: "china",
        label: {
          // show: true,
        },
        data: [],
      },
    ],
  };
  // mapChart.setOption(option2);
  // 请求数据图表
  // 处理value,name
  // 更新option数据
  // 重新渲染图表
  http.echart.getStat().then((res) => {
    console.log(res);
    const piedata = res.data.salePie;
    const data = piedata.map((item) => ({
      value: item.yesterday_money,
      name: item.name,
    })) as PieSeriesOption[];

    // 地图
    const mapData = res.data.saleMap;
    const data2 = mapData.map((item) => ({
      name: item.areaName,
      value: item.saleNum,
    })) as PieSeriesOption[];
    console.log(data2);

    (option.series as PieSeriesOption[])[0].data = data;
    (option2.series as PieSeriesOption[])[0].data = data2;
    myChart.setOption(option);
    mapChart.setOption(option2);
  });

  // 地图图表
});
</script>

<style lang="less" scoped>
.Crumbs {
  height: 30px;
  padding-top: 15px;
  padding-left: 15px;
  border: 1px solid #eee;
}
</style>
